<template>
    <div>
        <div class="tabNav">
            <router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
            <b>/<img src="../assets/img/service.png" />服务者信息</b>
            <el-input
                placeholder="请输入姓名/手机号/身份证号/灵活用工平台名称进行搜索"
                @change="searchMethods"
                v-model="searchValue">
            </el-input>
            <em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i>服务着数量：{{ seviceCountNumber }}</em>
        </div>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-card class="cardTits cardTitss cardTitdd" shadow="hover">

                    <el-tabs class="tab-personal" v-model="activeName">
						<el-tab-pane label="全部" name="0">
							<service-table v-if="activeName == 0" ref="searchMethods" :processStatus="0" :search="searchValue"></service-table>
						</el-tab-pane>
						<el-tab-pane label="未办理" :lazy="true" name="1">
							<service-table v-if="activeName == 1" ref="searchMethods" :processStatus="1" :search="searchValue"></service-table>
						</el-tab-pane>
						<el-tab-pane label="已办理" :lazy="true" name="2">
							<service-table v-if="activeName == 2" ref="searchMethods" :processStatus="3" :search="searchValue"></service-table>
						</el-tab-pane>
						<el-tab-pane label="被驳回" :lazy="true" name="3">
							<service-table v-if="activeName == 3" ref="searchMethods" :processStatus="4" :search="searchValue"></service-table>
						</el-tab-pane>
					</el-tabs>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ServiceTable from '../components/table/ServiceTable.vue'
export default {
    name: "dashboard",
    data() {
        return {
            activeName: '0',
            name: localStorage.getItem("ms_username"),
            searchValue: '',
			seviceCountNumber: 0
        };
    },
    components: {
		ServiceTable
    },
    computed: {
        role() {
            return this.name === "admin" ? "超级管理员" : "普通用户";
        }
    },
	mounted() {
		this.seviceCount()
	},
    methods: {
		searchMethods() {
			// 搜索
			this.$refs.searchMethods.getTableData()
		},
		seviceCount() {
			// 获取服务者数量
            this.$http({
                url: "/api/sevicer/selectSevcierList",
                method: "post",
                headers: {
                "Content-Type": "application/json",
                },
                data: {
                    pageNum: 1,
                    pageSize: 10,
                    processStatus: 0
                },
            }).then((data) => {
                if (data.code === 0) {
                    this.seviceCountNumber = data.result.total;
                }
            });
		}
    }
};
</script>
<style lang="scss" scoped>
.tab-personal {
    background-color: #FFFFFF;
    :deep(.el-tabs__header)  {
        margin-bottom: 10px;
        padding: 8px 20px 0;
    }
    :deep(.el-tabs__item) {
        color: #0A2E6A;
        font-weight: normal;
    }
    :deep(.el-tabs__item.is-active) {
        color: #326CF0;
        font-weight: 500;
    }
    :deep(.el-tabs__nav-wrap::after) {
        background-color: #FFFFFF;
    }
    :deep(.el-tabs__active-bar) {
        background-color: #326CF0;
        height: 4px;
        border-radius: 2px;
    }
}
</style>